﻿@{
    Layout = null;
    var list = ViewData["olist"] as IList<Sc.Domain.CommOrgz>;
    var types = ViewData["type"] as IList<Sc.Domain.BaseItem>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>车辆首页</title>
    <link href="~/Content/css/style.css" rel="stylesheet" />
    <link href="~/Content/css/select.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/select-ui.min.js"></script>
    <script src="~/Content/layer-v2.1/layer/layer.js"></script>
    <script src="~/Content/laypage-v1.3/laypage/laypage.js"></script>
    <script src="~/Scripts/comm.js"></script>
    <script type="text/javascript">
        var arrXy;
        var arrAddress;
        var arrBaiduXy;
        $(document).ready(function (e) {
            $(".select2").uedSelect({
                width: 110
            });
            loadData(1, 1);
        });

        //数据加载
        function loadData(curr, tag) {
            arrXy = new Array();
            var url = '@Url.Action("GetPageDataByPage")';
            var load = loadTip("数据加载中，请稍候", 16, 0);
            $.get(url, { pageSize: 10, pageIndex: curr, orgz: $("#selOrgz").val(), state: $("#selState").val(), carNo: $("#txtCarNo").val(), carType: $("#selType").val() }, function (data) {
                $("#listData").find("tr").remove();
                if (tag == 1) {
                    initPage(data.PageCount, 1);
                    $("#recordCount").html(data.RecordCount);
                }
                var gpsbasedata = new Array();
                var table = document.getElementById("listData");
                $.each(data.Data, function (index, n) {
                    var row = table.insertRow(table.rows.length);
                    row.Id = n.Id;
                    row.setAttribute("state", n.CarState);
                    var cb = row.insertCell(0);
                    cb.innerHTML = "<input type='checkbox' tag=" + n.Id + " />";
                    var carNo = row.insertCell(1);
                    carNo.innerHTML = n.CarNo;
                    var driver = row.insertCell(2);
                    driver.innerHTML = n.DriverName;
                    var take = row.insertCell(3);
                    take.innerHTML = n.TakeCount;
                    var carType = row.insertCell(4);
                    carType.innerHTML = n.CarTypeName;
                    var cno = row.insertCell(5);
                    cno.innerHTML = n.ChassisNumber;
                    var color = row.insertCell(6);
                    color.innerHTML = n.ServiceLife + "年";
                    var pl = row.insertCell(7);
                    pl.innerHTML = n.CarDisplacement;
                    var lc = row.insertCell(8);
                    lc.innerHTML = n.ZcTonnage + "吨";
                    var byTime = row.insertCell(9);
                    byTime.innerHTML = ChangeDateFormat(n.BuyTime, 1);
                    var stName = row.insertCell(10);
                    stName.innerHTML = n.StateName == "已派出" ? "<a id='a_" + n.CarNo + "' href=\"javascript:backCar('" + n.CarNo + "')\">已派出</a> | <a href='@Url.Action("Paichedan", "SendCar")?carno=" + n.CarNo + "'>派车单</a>" : n.StateName;
                    var gps = row.insertCell(11);
                    gps.innerHTML = "加载中..";
                    gpsbasedata[index] = n.CarNo;
                });
                $('.tablelist tbody tr:odd').addClass('odd');
                $("#currPage").html(curr);
                layer.close(load);

                if (gpsbasedata.length > 0) {
                    LoadGpsInfo(gpsbasedata);
                }
            });
        }
        //初始化分页
        function initPage(pageCount, curr) {
            laypage({
                cont: 'paginList',
                pages: pageCount,
                first: false,
                last: false,
                skip: true,
                curr: curr || 1,
                jump: function (e, first) {
                    if (!first) {
                        loadData(e.curr)
                    }
                }
            });
        }
        //新增车辆基本信息
        function add() {
            window.location.href = '@Url.Action("CreateCarInfo")';
        }
        //删除车辆
        function deleteCarInfo() {
            var cbx = $("#listData").find("input[type=checkbox]:checked");
            if (cbx.length <= 0) {
                loadTip("请至少选择一辆车进行删除！", 2, 1000);
                return false;
            }
            layer.confirm("您确定要删除吗？", function () {
                var str = "";
                cbx.each(function () {
                    str += $(this).attr("tag") + ",";
                });
                var url = '@Url.Action("DeleteCarInfo")';
                var load = loadTip("数据删除中，请稍候", 16, 0);
                $.get(url, { ids: str }, function (data) {
                    if (data > 0) {
                        layer.msg('车辆信息删除成功', { icon: 1, time: 1000, shade: [0.3, '#000'] }, function () {
                            loadData();
                            layer.closeAll();
                        });
                    }
                });
            });
        }
        //修改车辆基本新
        function update() {
            var cbx = $("#listData").find("input[type=checkbox]:checked");
            if (cbx.length <= 0) {
                loadTip("请至少选择一辆车进行修改！", 2, 1000);
                return false;
            }
            if (cbx.length > 1) {
                loadTip("只能选择一辆车进行修改！", 2, 1000);
                return false;
            }
            window.location.href = "@Url.Action("UpdateCarInfo")?id=" + $(cbx[0]).attr("tag");
        }


        //查看车辆基本信息详情
        function showCarInfo() {
            var cbx = $("#listData").find("input[type=checkbox]:checked");
            if (cbx.length <= 0) {
                loadTip("请至少选择一辆车查询车辆信息详情！", 2, 1000);
                return false;
            }
            if (cbx.length > 1) {
                loadTip("只能选择一辆车查询车辆信息详情！", 2, 1000);
                return false;
            }
            window.location.href = "@Url.Action("ShowCarInfo")?id=" + $(cbx[0]).attr("tag");
        }

        //加载gps定位信息
        function LoadGpsInfo(gpsbasedata) {
            console.log(gpsbasedata);
            var url = "@Url.Action("GetCarSite")";
            $.each(gpsbasedata, function (index, n) {
                $.get(url, { carno: n }, function (data) {
                    var xy = data.substring(data.indexOf(",") + 1) + "," + data.substring(0, data.indexOf(","));
                    arrXy[index] = xy;
                    if (gpsbasedata.length == arrXy.length) {
                        gpsXYtobaiduXY(arrXy, function (baidubasedata) {
                            $.each(arrAddress, function (i, address) {
                                if (typeof(arrAddress[i])=="undefined") {
                                    arrAddress[i] = baidubasedata.shift();
                                }
                            });
                            $.each(arrAddress, function (index, n) {
                                var yx = n.y + "," + n.x;
                                LoadAddressByBaiduMap(yx, index);
                            });
                        });
                    }
                });

            });
        }

        //GSP位置转换为百度定位xy
        function gpsXYtobaiduXY(arrXy, callback) {
            arrBaiduXy = new Array();
            arrAddress = new Array(arrXy.length);
            $.each(arrXy, function (index, n) {
                if (n == "0,0") {
                    arrAddress[index] = {"x":"0","y":"0"};
                } else {
                    arrBaiduXy.push(n);
                }
            });
            var key = "ewoBYGAnoBmglxvNrCbYeHN6IyglqEZA";
            var url = "http://api.map.baidu.com/geoconv/v1/?coords=" + arrBaiduXy.join(';') + "&from=1&to=5&ak=" + key;
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                success: function (json) {
                    callback(json.result);
                },
                error: function (a, b, c) {
                    console.log(c);
                }
            });
        }

        //通过百度地图加载位置名称
        function LoadAddressByBaiduMap(xy, index) {
            var url = "http://api.map.baidu.com/geocoder/v2/?ak=Ngfl7ZfRhD54hkhaP4p4mF9o77S70cqx&callback=renderReverse&location=" + xy + "&output=json&pois=1";
            var table = $("#listData");
            $.ajax(url, {
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    var ent = eval(data);
                    if (ent && ent.result && ent.result.formatted_address != "") {
                        table.find("tr:eq(" + index + ")").find("td:last").html(ent.result.formatted_address);
                    } else {
                        table.find("tr:eq(" + index + ")").find("td:last").html("无信息，或信息有误");
                    }
                }
            });
        }

        //还车
        function backCar(carNo) {
            if (confirm("确认结束本车的行程，完成还车？")) {
                var url = '@Url.Action("SaveReturnCarByCar", "SendCar")';
                var load = loadTip("还车数据处理中，请稍候", 16, 0);
                $.post(url, { carno: carNo }, function (data) {
                    if (data == 1) {
                        alert("还车成功!");
                        $("#a_" + carNo).parent().html("未派出");
                    } else {
                        alert("还车失败!请重试或联系管理员。");
                    }
                    layer.close(load);
                });
            }
        }

    </script>
</head>
<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="javascript:void(0);">车辆列表</a></li>
        </ul>
    </div>
    <div class="rightinfo">
        <div class="tools">
            <ul class="toolbar">
                <li class="click" onclick="add();"><span><img src="~/Content/images/t01.png" /></span>添加</li>
                <li class="click" onclick="update();"><span><img src="~/Content/images/t02.png" /></span>修改</li>
                <li onclick="showCarInfo();"><span><img src="~/Content/images/t04.png" /></span>详情</li>
                <li onclick="deleteCarInfo();"><span><img src="~/Content/images/t03.png" /></span>删除</li>
            </ul>
            <ul class="seachform" style="float:right;">
                <li>
                    <label>单位</label>
                    <div class="vocation">
                        <select name="select" class="select2" id="selOrgz">
                            <option value="0">----请选择----</option>
                            @foreach (var item in list)
                            {
                                <option value="@item.Id">@item.OrgzName</option>
                            }
                        </select>
                    </div>
                </li>

                <li>
                    <label>车牌号</label>
                    <input type="text" id="txtCarNo" style="width:110px" class="scinput" />
                </li>
                <li>
                    <label>车辆状态</label>
                    <div class="vocation">
                        <select name="select" class="select2" id="selState">
                            <option value="-1">----请选择----</option>
                            <option value="0">未派出</option>
                            <option value="1">已派出</option>
                        </select>
                    </div>
                </li>
                <li>
                    <label>车辆类型</label>
                    <div class="vocation">
                        <select name="select" class="select2" id="selType">
                            <option value="0">----请选择----</option>
                            @foreach (var item in types)
                            {
                                <option value="@item.Id">@item.Name</option>
                            }
                        </select>
                    </div>
                </li>
                <li>
                    <label>&nbsp;</label>
                    <input name="Input" type="button" class="scbtn" onclick="loadData(1,1);" value="查询" />
                </li>
            </ul>
        </div>
        <table class="tablelist">
            <thead>
                <tr>
                    <th width="30px"></th>
                    <th>车牌号</th>
                    <th>驾驶员</th>
                    <th>准载人数</th>
                    <th>车型</th>
                    <th>车架号</th>
                    <th>报废年限</th>
                    <th>排量</th>
                    <th>准载吨位</th>
                    <th>购买日期</th>
                    <th>车辆状态</th>
                    <th>北斗定位</th>
                </tr>
            </thead>
            <tbody id="listData" style="line-height:30px;"></tbody>
        </table>
        <div class="pagin">
            <div class="message" style="padding-top:5px;">共&nbsp;<i class="blue" id="recordCount"></i>&nbsp;条记录，当前显示第&nbsp;<i class="blue" id="currPage"></i>&nbsp;页</div>
            <ul class="paginList" id="paginList"></ul>
        </div>
    </div>
</body>
</html>
